import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:music_app/widget/my_cached_network_image.dart';
import 'package:music_app/widget/text_icon_button.dart';

class RecommentDay extends StatefulWidget {
  const RecommentDay({super.key});

  @override
  State<RecommentDay> createState() => _RecommentDayState();
}

class _RecommentDayState extends State<RecommentDay> {
  @override
  Widget build(BuildContext context) {
    double width = (MediaQuery.of(context).size.width - 100) / 2;
    double height = width + 50;
    int x = (width * 4).toInt();
    int y = (height * 4).toInt();
    return Container(
      margin: const EdgeInsets.only(bottom: 24),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextIconButton(
            text: '晚上好',
            onTap: () {},
          ),
          const SizedBox(height: 8),
          SizedBox(
            height: height,
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: [
                GestureDetector(
                  onTap: () {
                    Get.toNamed('/recommend-day');
                  },
                  child: Container(
                    width: width,
                    margin: const EdgeInsets.only(right: 8),
                    child: Stack(
                      children: [
                        // 裁剪图片
                        ClipRRect(
                          borderRadius: BorderRadius.circular(12),
                          child: MyCachedNetworkImage(
                            imageUrl:
                                'https://p2.music.126.net/TTK05zjVfGlaihDmWekm8A==/109951167700486055.jpg',
                            width: width,
                            height: height,
                            x: x,
                            y: y,
                          ),
                        ),
                        // 加一层遮罩
                        Container(
                          width: width,
                          height: height,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                            color: Colors.black.withOpacity(0.4),
                          ),
                        ),
                        const Positioned(
                          top: 4,
                          left: 4,
                          child: Row(
                            children: [
                              Padding(
                                padding: EdgeInsets.only(right: 4),
                                child: Icon(
                                  Icons.calendar_month,
                                  color: Colors.white,
                                  size: 24,
                                ),
                              ),
                              Text(
                                '每日推荐',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 18,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                GestureDetector(
                  onTap: () {
                    Get.toNamed(
                      '/playlist',
                      arguments: {
                        'id': 12698227226,
                      },
                    );
                  },
                  child: Container(
                    width: width,
                    margin: const EdgeInsets.only(right: 8),
                    child: Stack(
                      children: [
                        // 裁剪图片
                        ClipRRect(
                          borderRadius: BorderRadius.circular(12),
                          child: MyCachedNetworkImage(
                            imageUrl:
                                'https://p2.music.126.net/TTK05zjVfGlaihDmWekm8A==/109951167700486055.jpg',
                            width: width,
                            height: height,
                            x: x,
                            y: y,
                          ),
                        ),
                        // 加一层遮罩
                        Container(
                          width: width,
                          height: height,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                            color: Colors.black.withOpacity(0.4),
                          ),
                        ),
                        const Positioned(
                          top: 4,
                          left: 4,
                          child: Row(
                            children: [
                              Padding(
                                padding: EdgeInsets.only(right: 4),
                                child: Icon(
                                  Icons.calendar_month,
                                  color: Colors.white,
                                  size: 24,
                                ),
                              ),
                              Text(
                                '每日推荐',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 18,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                GestureDetector(
                  onTap: () {
                    Get.toNamed(
                      '/playlist',
                      arguments: {
                        'id': 12698227226,
                      },
                    );
                  },
                  child: Container(
                    width: width,
                    margin: const EdgeInsets.only(right: 8),
                    child: Stack(
                      children: [
                        // 裁剪图片
                        ClipRRect(
                          borderRadius: BorderRadius.circular(12),
                          child: MyCachedNetworkImage(
                            imageUrl:
                                'https://p2.music.126.net/TTK05zjVfGlaihDmWekm8A==/109951167700486055.jpg',
                            width: width,
                            height: height,
                            x: x,
                            y: y,
                          ),
                        ),
                        // 加一层遮罩
                        Container(
                          width: width,
                          height: height,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                            color: Colors.black.withOpacity(0.4),
                          ),
                        ),
                        const Positioned(
                          top: 4,
                          left: 4,
                          child: Row(
                            children: [
                              Padding(
                                padding: EdgeInsets.only(right: 4),
                                child: Icon(
                                  Icons.calendar_month,
                                  color: Colors.white,
                                  size: 24,
                                ),
                              ),
                              Text(
                                '每日推荐',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 18,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
